
<template>
  <!--右侧开始-->
  <div>

    <div class="topSearch">
        <div class="leftBox" style="max-width:100%">
          <div class="searchbox">
            <em>学年：</em>
            <el-select v-model="select.xuenian" size="small" placeholder="请选择学年">
              <el-option v-for="(item,index) in select.yearList" :key="index" :label="item.timeName" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="searchbox">
            <em>缴费方案名称：</em>
            <el-select v-model="select.paymentSchemeId" @change="changeTName" size="small" filterable placeholder="请选择缴费方案名称">
              <el-option v-for="item in select.paymentSchemeList" :key="item.projectId" :label="item.projectName" :value="item.projectId"
              ></el-option>
            </el-select>
          </div>

          <div class="searchbox">
          <em>缴费类型：</em>
          <el-select
            v-model="select.category"
            placeholder="输入学校名称"
            size="small"
            style="width:80px"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.categoryList"
              :key="item.category"
              :label="item.categoryName"
              :value="item.category"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>校区：</em>
          <el-select
            v-model="select.schoolId"
            @change="changeSchool"
            placeholder="输入学校名称"
            size="small"
            style="width:150px"
            clearable
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in select.schoolList"
              :key="item.schoolId"
              :label="item.schoolName"
              :value="item.schoolId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>年级：</em>
          <el-select
            v-model="select.gradeId"
            @change="changeGrade"
            placeholder="输入学校名称"
            size="small"
            style="width:80px"
            clearable
          >
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in select.gradeList"
              :key="item.gradeId"
              :label="item.gradeName"
              :value="item.gradeId"
            ></el-option>
          </el-select>
        </div>

        <div class="searchbox">
          <em>班级：</em>
          <el-select v-model="select.classId" placeholder="输入学校名称" :disabled="select.studentSource=='Sign'" size="small" style="width:80px" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in select.classList"
              :key="item.classId"
              :label="item.className"
              :value="item.classId"
            ></el-option>
          </el-select>
        </div>

          <div class="searchbox">
            <em>学生姓名或身份证号：</em>
            <el-input v-model="select.nameOrIDNumber" style="width:180px;" placeholder="请输入学生姓名或身份证号" clearable size="small"></el-input>
          </div>

          <div class="searchbox">
            <em>退费日期：</em>
            <el-date-picker v-model="select.dateB" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" :picker-options="pickerOptionsBegin" style="width:190px;" :clearable="false" size="small"></el-date-picker>~
            <el-date-picker v-model="select.dateE" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :picker-options="pickerOptionsEnd" style="width:190px;" :clearable="false" size="small"></el-date-picker>
          </div>

          <div class="searchbox">
            <em>单据日期：</em>
            <el-date-picker v-model="select.backDateB" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" :picker-options="pickerOptionsBeginR" style="width:190px;" :clearable="false" size="small"></el-date-picker>~
            <el-date-picker v-model="select.backDateE" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :picker-options="pickerOptionsEndR" style="width:190px;" :clearable="false" size="small"></el-date-picker>
          </div>

          <div class="searchbox">
            <em>是否减免：</em>
            <el-radio-group v-model="select.isReduction" style="line-height: 40px; padding:10px 0 0;">
              <el-radio label="">全部</el-radio>
              <el-radio label="Y">是</el-radio>
              <el-radio label="N">否</el-radio>
            </el-radio-group>
          </div>

          <div class="searchbox">
            <el-button type="primary" @click="getData" size="mini">查询</el-button>
            <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
          </div>

        </div>
        <!-- <div class="rightBox">
          <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
        </div> -->
        <div class="clear"></div>
      </div>

      <div class="contentBox" style="height:86%;">
        <el-table :data="data" :header-cell-style="headClass" border stripe style="width: 100%" height="90%">
          <el-table-column label="单据日期" width="180">
            <template slot-scope="scope">
                <span>{{scope.row.billCreateTime|newBillCreateTime}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="projectName" label="缴费方案" width="150"></el-table-column>
          <el-table-column prop="schoolName" label="所在校区" width="200"></el-table-column>
          <el-table-column prop="graduateYear" label="毕业年份" width="120"></el-table-column>
          <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
          <el-table-column prop="idCard" label="身份证号" width="200"></el-table-column>
          <el-table-column prop="categoryName" label="学生类型" width="150"></el-table-column>
          <el-table-column prop="gradeName" label="就读年级"></el-table-column>
          <el-table-column label="就读班级">
            <template slot-scope="scope">
              <span v-if="scope.row.className==''||scope.row.className==null||scope.row.className==undefined">未分班级</span>
              <span v-else>{{scope.row.className}}</span>
            </template>
          </el-table-column>
           <el-table-column label="缴费状态">
             <template slot-scope="scope">
               <span v-if="scope.row.paymentState=='UnPaid'">未缴费</span>
               <span v-if="scope.row.paymentState=='PaidUp'">已缴清</span>
               <span v-if="scope.row.paymentState=='UnPaidUp'">未缴清</span>
             </template>
           </el-table-column>
          <el-table-column label="应缴金额">
            <template slot-scope="scope">
              <el-button @click="see(scope.row)" type="text" v-if="scope.row.payableMoney==''||scope.row.payableMoney==null||scope.row.payableMoney==undefined">0.00</el-button>
              <el-button @click="see(scope.row)" type="text" :class="{fuFont:parseFloat(scope.row.payableMoney?scope.row.payableMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.payableMoney|moneyStyle}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="实缴金额">
            <template slot-scope="scope">
              <span v-if="scope.row.paidMoney==''||scope.row.paidMoney==null||scope.row.paidMoney==undefined">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.paidMoney?scope.row.paidMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.paidMoney|moneyStyle}}</span>
            </template>
          </el-table-column>
          <el-table-column label="减免金额">
            <template slot-scope="scope">
              <span v-if="scope.row.tuitionMoney==''||scope.row.tuitionMoney==null||scope.row.tuitionMoney==undefined" style="color:#e8851e;">0.00</span>
              <span :class="{fuFont:parseFloat(scope.row.tuitionMoney?scope.row.tuitionMoney:0).toFixed(2)*1000<0}" style="color:#e8851e;" v-else>{{scope.row.tuitionMoney|moneyStyle}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="各项费用总计" width="110px">
            <template slot-scope="scope">
              <span :class="{fuFont:parseFloat(heji(scope.row)).toFixed(2)*1000<0}" >{{heji(scope.row)}}</span>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="各项目费用退费明细" width="150px">
            <template slot-scope="scope">
              <el-button @click="see1(scope.row)" type="primary" size="mini">查看</el-button>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="刷卡金额">
            <template slot-scope="scope">
              <span v-if="scope.row.cardMoney==''||scope.row.cardMoney==null||scope.row.cardMoney==undefined">--</span>
              <span v-else>{{scope.row.cardMoney|moneyStyle}}</span>
            </template>
          </el-table-column>
          <el-table-column label="现金金额">
            <template slot-scope="scope">
              <span v-if="scope.row.cashMoney==''||scope.row.cashMoney==null||scope.row.cashMoney==undefined">--</span>
              <span v-else>{{scope.row.cashMoney|moneyStyle}}</span>
            </template>
          </el-table-column>
          <el-table-column label="转账金额">
            <template slot-scope="scope">
              <span v-if="scope.row.transferMoney==''||scope.row.transferMoney==null||scope.row.transferMoney==undefined">--</span>
              <span v-else>{{scope.row.transferMoney|moneyStyle}}</span>
            </template>
          </el-table-column>
          <el-table-column label="其他方式" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.otherMoney==''||scope.row.otherMoney==null||scope.row.otherMoney==undefined">--</span>
            <span v-else>{{scope.row.otherMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
          <el-table-column label="微信公众号" width="110px">
            <template slot-scope="scope">
              <span v-if="scope.row.onLineMoney==''||scope.row.onLineMoney==null||scope.row.onLineMoney==undefined">--</span>
              <span v-else>{{scope.row.onLineMoney|moneyStyle}}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="退费金额">
            <template slot-scope="scope">
              <el-button @click="see1(scope.row)" type="text" v-if="scope.row.refundMoney==''||scope.row.refundMoney==null||scope.row.refundMoney==undefined">--</el-button>
              <el-button @click="see1(scope.row)" type="text" :class="{fuFont:parseFloat(scope.row.refundMoney?scope.row.refundMoney:0).toFixed(2)*1000<0}" v-else>{{scope.row.refundMoney|moneyStyle}}</el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column label="各项目费用明细" width="120px">
            <template slot-scope="scope">
              <el-button @click="see(scope.row)" type="primary" size="mini">查看</el-button>
            </template>
          </el-table-column> -->
          <el-table-column label="退费日期" width="180">
            <template slot-scope="scope">
                <span>{{scope.row.operateTime|newOperateTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="退费凭证">
            <template slot-scope="scope">
              <el-button @click="wachfile(scope.row)" :disabled="scope.row.fileUrl==null||scope.row.fileUrl==''||scope.row.fileUrl==undefined" type="primary" size="mini">查看</el-button>
              <!-- <i class="el-icon-picture" :style="{color:scope.row.fileUrl==null?'red':'green'}"></i> -->
            </template>
          </el-table-column>
          <el-table-column label="退费说明">
            <template slot-scope="scope">
              <el-button @click="wachMes(scope.row)" :disabled="scope.row.remark==null||scope.row.remark==''||scope.row.remark==undefined" type="primary" size="mini">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :total="pageAll"></el-pagination>
        </div>
      </div>

      <el-dialog title="各项费用明细" :visible.sync="dialogDetailed.show">
        <div class="layerBox">
      <div class="layerDetailedList">
        <dl v-for='d in dialogDetailed.data' :key="d.itemId">
          <dt>{{d.itemName}}</dt>
          <dd>{{d.money}}</dd>
        </dl>
      </div>
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogDetailed.show=!dialogDetailed.show">确定</el-button>
      </div>
    </el-dialog>

    <el-image-viewer v-if="showViewer" :on-close="closeViewer" tooltip="60" :url-list="[$store.state.userModule.phurl+imgUrl]" style="position: fixed; z-index:20000; top:60px; left:0; right:0; bottom:0; margin:auto;" />

    <el-dialog title="提示" :visible.sync="showViewer1" width="30%">
      <span>{{remarkS}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showViewer1 = false">确 定</el-button>
      </span>
    </el-dialog>


  </div>
  <!--右侧结束-->
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  export default {
    name: "receivable",
    data(){
      return {
        showViewer: false, // 显示查看器
        showViewer1:false,
        remarkS:'',
        imgUrl:'',
        pageIndex:1,
        pageAll:0,
        select: {
          xuenian:'',
          yearList:[],
          schoolList: [],
          schoolId: "",
          gradeList: [],
          gradeId: "",
          category: "",
          categoryList: [],
          classList: [],
          classId: "",
          paymentSchemeList: [],
          paymentSchemeId: [],
          name: "",
          nameOrIDNumber: "",
          isReduction: "",
          dateB: "",
          dateE: "",
          studentSource:''
        },
      pickerOptionsBegin:{
          disabledDate:time=>{
            return time.getTime() > new Date(this.select.dateE).getTime();
          }
        },
        pickerOptionsEnd:{
          disabledDate:time=>{
            return time.getTime() < new Date(this.select.dateB).getTime();
          }
        },
        pickerOptionsBeginR:{
          disabledDate:time=>{
            return time.getTime() > new Date(this.select.backDateE).getTime();
          }
        },
        pickerOptionsEndR:{
          disabledDate:time=>{
            return time.getTime() < new Date(this.select.backDateB).getTime();
          }
        },
        data:[],
        dialogDetailed: {
          show: false,
          student: [],
          data: []
        }
      }
    },
    watch:{
      "select.xuenian":function(v){
      if(v){
        this.select.paymentSchemeId = "";
        this.select.schoolId = "";
        this.select.gradeId = "";
        this.data = [];
        this.getSearchP();
      }
    },
    "select.category":function(v){
      if(v){
        this.getData();
      }
    },
    "select.schoolId":function(v){
      if(v){
        this.getData();
      }
    },
    "select.gradeId":function(v){
      if(v){
        this.getData();
      }
    },
    "select.classId":function(v){
      if(v){
        this.getData();
      }
    }
  },
    filters:{
      newOperateTime(val){
        if(!val)return '--';
        return val.substr(0,19);
      },
      newBillCreateTime(val){
        if(!val)return '--';
        return val.substr(0,19);
      },
      moneyStyle(val){
        var nm = 0;
        nm = parseFloat(val).toFixed(2);
        return nm;
      }
    },
    mounted() {
      var that = this;
    // that.getSearchP();
    that.getSchoolYearList();
    that.$nextTick(()=>{
      setTimeout(function(){
        that.getData();
      },800)
    })
    },
    components: { ElImageViewer },
    methods:{
      // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
      // 合计
      heji(obg){
        var numq = 0;
        numq = (parseFloat(obg.payableMoney==null?0:obg.payableMoney)*1000-parseFloat(obg.tuitionMoney==null?0:obg.tuitionMoney)*1000)/1000;
        return parseFloat(numq).toFixed(2);
      },
      // TODO:获取学年列表
      getSchoolYearList(){
        this.$api.systemSetup.GetSearchList("time").then(res=>{
          console.log("获取学年列表",res)
          this.select.yearList = res.data.result.timeList;
          this.select.xuenian = res.data.result.timeList[0].id;
          this.getSearchP();
        })
      },
      // TODO:搜索项目
    getSearchP(project) {
      this.$api.reportForm.GetSearch("project","002",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res => {
        //console.log("获取缴费项",res);
        this.select.paymentSchemeList = res.data.result.projectList;
        this.select.paymentSchemeId = res.data.result.projectList[0].projectId;
        this.select.studentSource = res.data.result.projectList[0].studentSource;
        this.getSearchS();
      });
    },
    // TODO:获取搜索学校
    getSearchS:function(){
      this.$api.reportForm.GetSearch("school","002",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res1 => {
          //console.log("获取学校列表",res1);
          this.select.schoolList = res1.data.result.schoolList;
          this.select.schoolId = res1.data.result.schoolList[0].schoolId;
          this.getSearchG();
          this.getData();
        });
    },
    //TODO: 获取搜索条件
    getSearchG:function(){
      this.$api.reportForm.GetSearch("gradeAndCategory","002",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res1 => {
          //console.log("获取年级缴费类型",res1);
          this.select.categoryList = res1.data.result.categoryList;
          this.select.gradeList = res1.data.result.gradeList;
        });
    },
//TODO: 获取班级
    getSearchC:function(){
      this.select.classId = '';
      this.$api.reportForm.GetSearch("class","002",this.select.xuenian,this.select.paymentSchemeId,this.select.schoolId,this.select.gradeId).then(res1 => {
          //console.log("获取班级",res1);
          this.select.classList = res1.data.result.classList;
        });
    },
    // 缴费名称改变
    changeTName:function(event){
      this.select.schoolId="";
      for(var a=0,lenn = this.select.paymentSchemeList.length;a<lenn;a++){
        if(this.select.paymentSchemeList[a].projectId==event){
          this.select.studentSource = this.select.paymentSchemeList[a].studentSource;
        }
      }
      this.getSearchS()
    },
    // 学校改变
    changeSchool:function(){
      var that = this;
      that.select.gradeId='';
      that.getSearchG()
    },
    // 年级改变
    changeGrade:function(){
      var that = this;
      that.select.classId='';
      that.getSearchC()
    },
      getData:function(){
        if(this.select.dateE){
        this.select.dateE = this.select.dateE.replace(/00:00:00/,"23:59:59");
        }
        if(this.select.backDateE){
        this.select.backDateE = this.select.backDateE.replace(/00:00:00/,"23:59:59");
        }
        var params = {projectId:this.select.paymentSchemeId,schoolId:this.select.schoolId,gradeId:this.select.gradeId,classId:this.select.classId,category:this.select.category,studentQuery:this.select.nameOrIDNumber, startOperateTime:this.select.dateB,endOperateTime:this.select.dateE, startBillCreateTime:this.select.backDateB, endBillCreateTime:this.select.backDateE,  isTuition:this.select.isReduction}
        this.$api.reportForm.GetRefundList("list",params,this.pageIndex).then(res => {
          //console.log("获取退费列表",res);
          this.data = res.data.result.list;
          this.pageIndex = res.data.result.page;
          this.pageAll = res.data.result.total;
        });
      },
      see(k) {
        this.$api.reportForm.WatchPaymentAmount(k.projectId, k.schoolId, k.sectionId, k.gradeId, k.studentId, k.paymentCategory,k.isResidence, k.isMilitaryTraining, k.isPhysicalExamination).then(res=>{
          //console.log("查看缴费项目请",res);
          this.dialogDetailed.data =  res.data.result;
        })
        this.dialogDetailed.show = true;
      },
      see1(c){
        this.dialogDetailed.data =[];
        this.$api.reportForm.WatchStudentAmount(c.projectId, c.studentId, c.serialId, "Refund", c.isResidence, c.isMilitaryTraining, c.isPhysicalExamination).then(res=>{
          //console.log("查看学生缴费",res);
          this.dialogDetailed.data =  res.data.result;
        })
        this.dialogDetailed.show = true;
      },
      exportExcel:function(){
        if(this.select.dateE){
        this.select.dateE = this.select.dateE.replace(/00:00:00/,"23:59:59");
        }
        if(this.select.backDateE){
        this.select.backDateE = this.select.backDateE.replace(/00:00:00/,"23:59:59");
        }
        var params = {projectId:this.select.paymentSchemeId,schoolId:this.select.schoolId,gradeId:this.select.gradeId,classId:this.select.classId,category:this.select.category,studentQuery:this.select.nameOrIDNumber, startOperateTime:this.select.dateB,endOperateTime:this.select.dateE, startBillCreateTime:this.select.backDateB, endBillCreateTime:this.select.backDateE,  isTuition:this.select.isReduction}
        this.$api.reportForm.GetRefundList("export",params,this.pageIndex).then(res => {
          //console.log("导出退费列表",res);
          window.open(res.data.result);
        });
      },
      // 分页页面切换
      handleCurrentChange:function(val){
        this.pageIndex = val;
        this.getData();
      },
      wachfile(obg){
        this.imgUrl = obg.fileUrl;
        this.showViewer = true;
      },
      wachMes:function(obg){
        this.remarkS = obg.remark;
        this.showViewer1 = true;
      },
      // 关闭查看器
      closeViewer() {
        this.showViewer = false
      }
    }
  }
</script>

<style scoped>
.el-image-viewer__close{ top: 80px; right: 80px; color: #FFF;}
</style>
